<template>
  <el-row :gutter="20">
    <el-col 
      v-for="(widget, index) in config.widgets" 
      :key="index"
      :span="widget.span || 12"
    >
      <el-card class="widget-card">
        <template #header>
          <div class="widget-header">
            <h3 class="widget-title">{{ widget.title }}</h3>
          </div>
        </template>
        
        <!-- 折线图 -->
        <div v-if="widget.type === 'line_chart'" class="chart-container">
          <div class="mock-chart">
            <div class="mock-chart-title">{{ widget.title }}</div>
            <div class="mock-chart-content">
              <div v-for="i in 5" :key="i" class="mock-bar" :style="{ height: `${Math.random() * 100 + 50}px` }"></div>
            </div>
          </div>
        </div>
        
        <!-- 饼图 -->
        <div v-else-if="widget.type === 'pie_chart'" class="chart-container">
          <div class="mock-chart">
            <div class="mock-chart-title">{{ widget.title }}</div>
            <div class="mock-pie"></div>
          </div>
        </div>
        
        <!-- 统计卡片 -->
        <div v-else-if="widget.type === 'statistic_card'" class="statistic-card">
          <div class="statistic-value">{{ widget.value }}</div>
          <div class="statistic-title">{{ widget.title }}</div>
          <div class="statistic-trend">
            <el-icon v-if="widget.trend === 'up'" color="#67C23A"><Top /></el-icon>
            <el-icon v-else color="#F56C6C"><Bottom /></el-icon>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { Top, Bottom } from '@element-plus/icons-vue'

const props = defineProps({
  config: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.widget-card {
  margin-bottom: 20px;
  height: 100%;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.widget-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.chart-container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.statistic-card {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.statistic-value {
  font-size: 32px;
  font-weight: bold;
  color: #409EFF;
}

.statistic-title {
  font-size: 14px;
  color: #606266;
  margin-top: 8px;
}

.statistic-trend {
  position: absolute;
  top: 20px;
  right: 20px;
}

.mock-chart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mock-chart-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.mock-chart-content {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
}

.mock-bar {
  width: 40px;
  background: #409eff;
  border-radius: 4px 4px 0 0;
}

.mock-pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #409eff 0% 25%,
    #67c23a 25% 50%,
    #e6a23c 50% 75%,
    #f56c6c 75% 100%
  );
  margin: 0 auto;
}
</style>